<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="g_t('fleet.selectVehicle')"
    width="850px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      v-loading="formLoading"
      class="set-dialog-form"
      :model="formData"
      :rules="rules"
    >
      <el-form-item prop="selectVehicleList" class="form-item-table">
        <VehicleTable
          ref="refVehicleTable"
          use="dialog"
          :type="vehicleTableType"
          :tenant-id="tenantId"
          :vehicle-ids="vehicleIds"
          :vehicleStartTime="vehicleStartTime"
          :vehicleEndTime="vehicleEndTime"
          @selection-change="handleSelectionChange"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
import VehicleTable from '@/views/fleet/vehicle/component/VehicleTable.vue'

defineProps({
  vehicleTableType: {
    type: String,
    default: 'radio' // selection-多选 | radio-单选
  },
  tenantId: {
    type: String,
    default: ''
  },
  vehicleIds: {
    type: Array,
    default: () => []
  },
  vehicleStartTime: {
    type: String,
    default: ''
  },
  vehicleEndTime: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['select'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})

const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  selectVehicleList: []
})
const rules = {
  selectVehicleList: g_rules.selectRule(g_t('fleet.vehicle'))
}

const handleClose = _ => {
  dialogVisible.value = false
}

onMounted(() => {})

const handleSelectionChange = val => {
  formData.value.selectVehicleList = val
}

const handleSubmitForm = () => {
  refDialogForm.value.validate(valid => {
    if (!valid) return
    handleClose()
    emit('select', formData.value.selectVehicleList)
  })
}
</script>

<style lang="scss" scoped>
.form-item-table {
  // :deep {
  :deep(.header-filter) {
    padding: 0;
  }
  :deep(.base-table-container) {
    padding: 0;
  }
  :deep(.el-form-item__content) {
    height: 100%;
  }
  :deep(.el-scrollbar__wrap) {
    max-height: 240px;
    overflow-y: auto;
  }
  // 修改错误提示导致的选择框样式变红
  &.is-error {
    :deep(.el-input__wrapper),
    :deep(.el-select__wrapper) {
      box-shadow: 0 0 0 1px var(--select-border-color) inset !important;
    }
  }
}
</style>
